<!-- 聊天输入组件 -->
<template>
  <view @click.stop class="chat-input-container">
    <!-- 输入区域 -->
    <view :class="['input-area', inputMessage.trim() ? 'has-content' : '']">
      <!-- 通话按钮 -->
      <view class="tool-btn" @tap="showCallDialog" v-if="!wxAuditModeFromStore">
        <text class="tn-icon-voice tool-icon"></text>
        <view class="vip-indicator" v-if="!isVip">VIP</view>
      </view>
      
      <view class="input-container">
        <input class="message-input" v-model="inputMessage" type="text" 
          :adjust-position="false" confirm-type="send" :focus="focus"
          placeholder="请输入消息..." @confirm="sendTextMessage" />
      </view>
      
      <!-- 表情按钮 -->
      <view class="emoji-btn" @tap="toggleEmojiPanel">
        <text :class="['emoji-icon', showEmojiPanel ? 'tn-icon-keyboard' : 'tn-icon-emoji-good']"></text>
      </view>
      
      <view :class="['send-btn', inputMessage.trim() ? 'show' : 'hide']" @tap="sendTextMessage">
        <text>发送</text>
      </view>
    </view>
    
    <!-- 底部额外内容容器：包含快捷工具栏、表情面板和工具面板 -->
    <view class="bottom-panels-container">
      <!-- 快捷工具栏 - 仅在没有展开面板时显示 -->
      <view class="quick-toolbar" v-if="!showEmojiPanel && !showToolPanel">
        <view class="quick-tool-item" @tap="handleToolClick('image')">
          <view class="quick-tool-icon-box">
            <text class="tn-icon-image quick-tool-icon"></text>
          </view>
        </view>
        
        <view class="quick-tool-item" @tap="toggleEmojiPanel">
          <view class="quick-tool-icon-box">
            <text class="tn-icon-emoji-general quick-tool-icon"></text>
          </view>
        </view>
        
        <view class="quick-tool-item" @tap="handleToolClick('camera')">
          <view class="quick-tool-icon-box">
            <text class="tn-icon-camera quick-tool-icon"></text>
          </view>
        </view>
        
        <view class="quick-tool-item" @tap="toggleToolPanel">
          <view class="quick-tool-icon-box">
            <text class="tn-icon-add quick-tool-icon"></text>
          </view>
        </view>
      </view>
      
      <!-- 表情面板 -->
      <view class="emoji-panel-container" :style="{height: showEmojiPanel ? '400rpx' : '0', opacity: showEmojiPanel ? '1' : '0', visibility: showEmojiPanel ? 'visible' : 'hidden'}">
        <scroll-view scroll-y class="emoji-panel-scroll">
          <view class="emoji-panel">
            <view class="emoji-item" v-for="(emoji, index) in emojiList" :key="index" @tap="insertEmoji(emoji)">
              <view class="emoji-item-inner">
                <text class="emoji-text">{{emoji}}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      
      <!-- 工具面板 -->
      <view class="tool-panel-container" :style="{height: showToolPanel ? '200rpx' : '0', opacity: showToolPanel ? '1' : '0', visibility: showToolPanel ? 'visible' : 'hidden'}">
        <scroll-view scroll-y class="tool-panel-scroll">
          <view class="tool-panel">
            <view class="tool-panel-item" @tap="handleToolClick('image')">
              <view class="tool-panel-icon-box">
                <text class="tn-icon-image tool-panel-icon"></text>
              </view>
              <text class="tool-panel-text">图片</text>
            </view>
            <view class="tool-panel-item" @tap="handleToolClick('camera')">
              <view class="tool-panel-icon-box">
                <text class="tn-icon-camera tool-panel-icon"></text>
              </view>
              <text class="tool-panel-text">拍照</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    
    <!-- 通话选择弹窗 -->
    <view class="call-dialog-overlay" v-if="showCallDialogFlag" @tap="hideCallDialog">
      <view class="call-dialog" @tap.stop>
        <view class="call-dialog-header">
          <text class="call-dialog-title">选择通话方式</text>
          <view class="call-dialog-close" @tap="hideCallDialog">
            <text class="tn-icon-close"></text>
          </view>
        </view>
        
        <view class="call-dialog-content">
          <view :class="['call-option', selectedCallType === 'audio' ? 'selected' : '']" @tap="selectCallType('audio')">
            <view class="call-option-icon">
              <text class="tn-icon-voice"></text>
            </view>
            <view class="call-option-text-wrapper">
              <text class="call-option-text">语音通话</text>
              <text class="vip-badge" v-if="!isVip">VIP</text>
            </view>
            <view class="call-option-check" v-if="selectedCallType === 'audio'">
              <text class="check-mark">✓</text>
            </view>
          </view>
          
          <view :class="['call-option', selectedCallType === 'video' ? 'selected' : '']" @tap="selectCallType('video')">
            <view class="call-option-icon">
              <text class="tn-icon-video"></text>
            </view>
            <view class="call-option-text-wrapper">
              <text class="call-option-text">视频通话</text>
              <text class="vip-badge" v-if="!isVip">VIP</text>
            </view>
            <view class="call-option-check" v-if="selectedCallType === 'video'">
              <text class="check-mark">✓</text>
            </view>
          </view>
        </view>
        
        <view class="call-agreement">
          <view class="agreement-summary">
            <text class="agreement-summary-text">使用通话功能即表示您同意遵守平台规定，禁止传播违法违规内容</text>
          </view>
          
          <view class="agreement-actions">
            <view class="agreement-checkbox" @tap="toggleAgreement">
              <view class="checkbox-icon" :class="{ checked: agreementChecked }">
                <text v-if="agreementChecked" class="checkmark">✓</text>
              </view>
              <text class="checkbox-text">我已阅读并同意</text>
              <text class="agreement-link" @tap.stop="showAgreementDetail">《用户通话协议》</text>
            </view>
            
            <view class="call-confirm-btn" :class="{ 'disabled': !agreementChecked || !selectedCallType }" @tap="confirmCall">
              <text>
                {{ selectedCallType === '' ? '请先选择通话类型' : '开始' + (selectedCallType === 'audio' ? '语音' : '视频') + '通话' }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 详细协议弹窗 -->
    <view class="agreement-detail-overlay" v-if="showAgreementDetailFlag" @tap="hideAgreementDetail">
      <view class="agreement-detail-dialog" @tap.stop>
        <view class="agreement-detail-header">
          <text class="agreement-detail-title">用户通话协议</text>
          <view class="agreement-detail-close" @tap="hideAgreementDetail">
            <text class="tn-icon-close"></text>
          </view>
        </view>
        
        <scroll-view scroll-y class="agreement-detail-content">
          <text class="agreement-detail-text">
1. 平台承诺：本平台是正规绿色的社交通话平台，致力于为用户提供健康、安全的通信环境，不会诱导用户进行任何违法违规行为。

2. 用户责任：用户在使用通话功能时，应严格遵守国家法律法规和社会公德，严禁传播、讨论或从事以下违规内容：
   • 黄色淫秽内容（包括但不限于色情、性暗示等）
   • 毒品相关内容（包括但不限于贩卖、制造、使用毒品等）
   • 赌博相关内容（包括但不限于网络赌博、赌博推广等）
   • 诈骗、传销、非法集资等违法活动
   • 暴力、恐怖主义、极端思想传播
   • 其他违反法律法规的内容

3. 平台监督：平台将依法履行监督义务，采用技术手段和人工审核对通话进行必要的监管，发现违规内容将及时处理。

4. 违规后果：用户若违反本协议，产生的一切法律后果由用户个人承担，平台仅作为技术服务提供方和监督方，不承担用户违规行为的法律责任。

5. 免责声明：平台已履行告知义务和监督职责，用户的违规行为属于个人行为，与平台无关，平台管理人员不承担因用户违规而产生的任何法律责任。

6. 协议生效：用户点击同意本协议即表示完全理解并接受以上所有条款，本协议自用户同意之时起生效。

请仔细阅读上述协议内容，确认同意后方可使用通话功能。
          </text>
        </scroll-view>
        
        <view class="agreement-detail-footer">
          <view class="agreement-detail-btn" @tap="agreeAndClose">
            <text>我已阅读并同意</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'ChatInput',
  props: {
    // 是否禁用输入
    disabled: {
      type: Boolean,
      default: false
    },
    // 表情列表
    customEmojiList: {
      type: Array,
      default: null
    },
    // 用户VIP状态
    isVip: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      inputMessage: '', // 输入框消息
      focus: false, // 输入框聚焦状态
      showEmojiPanel: false, // 是否显示表情面板
      showToolPanel: false, // 是否显示工具面板
      showCallDialogFlag: false, // 是否显示通话选择弹窗
      selectedCallType: '', // 选择的通话类型：audio/video，初始为空
      agreementChecked: false, // 是否同意协议
      showAgreementDetailFlag: false, // 是否显示详细协议弹窗
      // 默认表情列表
      defaultEmojiList: [
        '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', 
        '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
        '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩',
        '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣',
        '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬',
        '👍', '👎', '👊', '✊', '🤛', '🤜', '🤝', '👏', '🙌', '👐',
        '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '💔', '❣️', '💕',
        '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯'
      ]
    }
  },
  computed: {
    // 从config模块获取wxAuditMode
    ...mapGetters('config', ['wxAuditMode']),
    
    // 将store中的wxAuditMode映射为组件内的变量
    wxAuditModeFromStore() {
      return this.wxAuditMode;
    },
    
    // 使用自定义表情列表或默认表情列表
    emojiList() {
      return this.customEmojiList || this.defaultEmojiList;
    }
  },
  methods: {
    // 发送文本消息
    sendTextMessage() {
      // 如果禁用输入或消息为空，则不发送
      if (this.disabled || !this.inputMessage.trim()) return;
      
      // 发出发送事件，传递消息内容
      this.$emit('send-text', this.inputMessage);
      
      // 清空输入框
      this.inputMessage = '';
    },
    
    // 切换表情面板
    toggleEmojiPanel() {
      // 如果禁用输入，则不处理
      if (this.disabled) return;
      
      // 如果工具面板已打开，则先关闭工具面板
      if (this.showToolPanel) {
        this.showToolPanel = false;
      }
      
      this.showEmojiPanel = !this.showEmojiPanel;
      
      if (this.showEmojiPanel) {
        // 显示表情面板时，隐藏键盘
        this.focus = false;
        uni.hideKeyboard();
      } else {
        // 隐藏表情面板时，显示键盘
        this.focus = true;
      }
    },
    
    // 插入表情
    insertEmoji(emoji) {
      if (this.disabled) return;
      this.inputMessage += emoji;
    },
    
    // 切换工具面板
    toggleToolPanel() {
      // 如果禁用输入，则不处理
      if (this.disabled) return;
      
      // 如果表情面板已打开，则先关闭表情面板
      if (this.showEmojiPanel) {
        this.showEmojiPanel = false;
      }
      
      this.showToolPanel = !this.showToolPanel;
      
      if (this.showToolPanel) {
        // 显示工具面板时，隐藏键盘
        this.focus = false;
        uni.hideKeyboard();
      } else {
        // 隐藏工具面板时，显示键盘
        this.focus = true;
      }
    },
    
    // 处理工具点击
    handleToolClick(tool) {
      // 如果禁用输入，则不处理
      if (this.disabled) return;
      
      // 发出工具点击事件
      this.$emit('tool-click', tool);
      
      // 一些工具可能需要关闭工具面板
      if (['image', 'camera', 'audio-call', 'video-call'].includes(tool)) {
        this.showToolPanel = false;
      }
    },
    
    // 显示通话选择弹窗
    showCallDialog() {
      if (this.disabled) return;
      
      // 重置弹窗状态
      this.selectedCallType = ''; // 初始不选择任何类型
      this.agreementChecked = false;
      this.showCallDialogFlag = true;
    },
    
    // 隐藏通话选择弹窗
    hideCallDialog() {
      this.showCallDialogFlag = false;
    },
    
    // 选择通话类型
    selectCallType(type) {
      this.selectedCallType = type;
    },
    
    // 切换协议同意状态
    toggleAgreement() {
      this.agreementChecked = !this.agreementChecked;
    },
    
    // 确认开始通话
    confirmCall() {
      if (!this.selectedCallType) {
        uni.showToast({
          title: '请先选择通话类型',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      if (!this.agreementChecked) {
        uni.showToast({
          title: '请先同意用户协议',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      // VIP校验
      if (!this.isVip) {
        // 关闭当前弹窗
        this.hideCallDialog();
        
        // 显示确认提示框
        const callTypeName = this.selectedCallType === 'audio' ? '语音通话' : '视频通话';
        uni.showModal({
          title: '会员专享功能',
          content: `${callTypeName}为会员专享功能，开通会员后即可享受高质量的语音/视频通话服务。是否了解会员权益？`,
          confirmText: '了解会员',
          cancelText: '取消',
          success: (res) => {
            if (res.confirm) {
              // 用户确认后，发出显示VIP弹窗的事件
              this.$emit('show-vip-modal', {
                type: 'call',
                callType: this.selectedCallType,
                message: '通话功能为会员专享，开通会员后即可享受语音/视频通话服务'
              });
            }
            // 如果用户取消，不做任何操作
          }
        });
        return;
      }
      
      // 发出通话事件
      const callType = this.selectedCallType === 'audio' ? 'audio-call' : 'video-call';
      this.$emit('tool-click', callType);
      
      // 关闭弹窗
      this.hideCallDialog();
    },
    
    // 显示详细协议弹窗
    showAgreementDetail() {
      this.showAgreementDetailFlag = true;
    },
    
    // 隐藏详细协议弹窗
    hideAgreementDetail() {
      this.showAgreementDetailFlag = false;
    },
    
    // 同意协议并关闭详细弹窗
    agreeAndClose() {
      this.agreementChecked = true;
      this.hideAgreementDetail();
    },
    
    // 设置焦点
    setFocus(focus = true) {
      this.focus = focus;
      
      if (focus) {
        // 获取焦点时，关闭面板
        this.showEmojiPanel = false;
        this.showToolPanel = false;
      }
    },
    
    // 显示键盘
    showKeyboard() {
      this.setFocus(true);
    },
    
    // 隐藏键盘和面板
    hideAll() {
      this.focus = false;
      this.showEmojiPanel = false;
      this.showToolPanel = false;
      uni.hideKeyboard();
    }
  }
}
</script>

<style lang="scss">
/* 聊天输入容器 */
.chat-input-container {
  position: relative;
  width: 100%;
}

/* 底部额外内容容器 */
.bottom-panels-container {
  position: relative;
  width: 100%;
  z-index: 100;
  overflow: hidden;
}

/* 表情面板容器 */
.emoji-panel-container {
  position: relative;
  width: 100%;
  background-color: rgba(10, 10, 10, 0.95);
  border-top: 1rpx solid #333;
  overflow: hidden;
  transition: height 0.25s ease-in-out, opacity 0.25s ease-in-out;
  z-index: 12;
  backdrop-filter: blur(10px);
}

/* 表情面板滚动视图 */
.emoji-panel-scroll {
  height: 400rpx;
  overflow-y: auto;
}

/* 工具面板容器 */
.tool-panel-container {
  position: relative;
  width: 100%;
  background-color: rgba(10, 10, 10, 0.95);
  border-top: 1rpx solid #333;
  overflow: hidden;
  transition: height 0.25s ease-in-out, opacity 0.25s ease-in-out;
  z-index: 11;
  backdrop-filter: blur(10px);
}

/* 工具面板滚动视图 */
.tool-panel-scroll {
  height: 200rpx;
  overflow-y: auto;
}

/* 输入区域 */
.input-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
  background-color: rgba(10, 10, 10, 0.95);
  border-top: 1rpx solid #333;
  position: relative;
  z-index: 10;
  backdrop-filter: blur(10px);
}

/* 输入框容器 */
.input-container {
  flex: 1;
  background-color: #2C3039;
  border-radius: 36rpx;
  padding: 16rpx 24rpx;
  border: 1px solid rgba(179, 247, 60, 0.2);
}

/* 消息输入框 */
.message-input {
  width: 100%;
  font-size: 28rpx;
  color: #FFFFFF;
}

/* 发送按钮 */
.send-btn {
  height: 72rpx;
  border-radius: 36rpx;
  background: linear-gradient(135deg, #B3F73C 0%, #93CC23 100%);
  color: #020303;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20rpx;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 0 10rpx rgba(179, 247, 60, 0.5);
  font-weight: 500;
  font-size: 28rpx;
  overflow: hidden;
  white-space: nowrap;
}

/* 隐藏状态的发送按钮 */
.send-btn.hide {
  width: 0;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  margin-left: 0;
  padding: 0;
  box-shadow: none;
}

/* 显示状态的发送按钮 */
.send-btn.show {
  width: 120rpx;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  padding: 0 20rpx;
  
  &:active {
    transform: scale(0.95);
    box-shadow: 0 0 15rpx rgba(179, 247, 60, 0.7);
  }
}

/* 表情面板 */
.emoji-panel {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx;
  justify-content: space-between;
}

/* 表情项 */
.emoji-item {
  width: 20%; /* 改为百分比宽度，每行5个 */
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 6rpx;
  margin-bottom: 10rpx;
}

/* 表情项内部容器 */
.emoji-item-inner {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
  background-color: #2C3039;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s, background-color 0.2s;
}

/* 表情项点击效果 */
.emoji-item-inner:active {
  background-color: #3A404B;
  transform: scale(0.95);
}

/* 表情文本 */
.emoji-text {
  font-size: 40rpx;
  line-height: 1;
}

/* 表情按钮 */
.emoji-btn {
  width: 72rpx;
  height: 72rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10rpx;
}

/* 表情按钮图标 */
.emoji-icon {
  font-size: 40rpx;
  color: #B3F73C;
  text-shadow: 0 0 5px rgba(179, 247, 60, 0.3);
}

/* 工具面板 */
.tool-panel {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx;
}

/* 工具面板项 */
.tool-panel-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15rpx 10rpx;
}

/* 工具面板图标容器 */
.tool-panel-icon-box {
  width: 70rpx;
  height: 70rpx;
  border-radius: 12rpx;
  background-color: #2C3039;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8rpx;
  border: 1px solid rgba(179, 247, 60, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}

.tool-panel-item:active .tool-panel-icon-box {
  transform: scale(0.95);
  box-shadow: 0 0 10rpx rgba(179, 247, 60, 0.3);
}

/* 工具面板图标 */
.tool-panel-icon {
  font-size: 40rpx;
  color: #B3F73C;
  text-shadow: 0 0 5px rgba(179, 247, 60, 0.3);
}

/* 工具面板文本 */
.tool-panel-text {
  font-size: 24rpx;
  color: #fff;
  margin-top: 4rpx;
}

/* 工具按钮 */
.tool-btn {
  width: 72rpx;
  height: 72rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10rpx;
  position: relative;
}

/* 工具按钮图标 */
.tool-icon {
  font-size: 40rpx;
  color: #B3F73C;
  text-shadow: 0 0 5px rgba(179, 247, 60, 0.3);
}

/* VIP指示器 */
.vip-indicator {
  position: absolute;
  top: -4rpx;
  right: -4rpx;
  font-size: 16rpx;
  font-weight: bold;
  color: #000;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border-radius: 8rpx;
  padding: 2rpx 6rpx;
  line-height: 1;
  box-shadow: 0 2rpx 4rpx rgba(255, 215, 0, 0.3);
  transform: scale(0.8);
}

/* 快捷工具栏 */
.quick-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 30rpx;
  background: linear-gradient(180deg, rgba(15, 18, 25, 0.98) 0%, rgba(10, 12, 18, 0.99) 100%);
  backdrop-filter: blur(20rpx);
  border-top: 1rpx solid rgba(179, 247, 60, 0.12);
  position: relative;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.3);
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1rpx;
    background: linear-gradient(90deg, transparent 0%, rgba(179, 247, 60, 0.25) 50%, transparent 100%);
  }
}

/* 快捷工具项 */
.quick-tool-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:active {
    transform: scale(0.95);
  }
}

/* 快捷工具图标容器 */
.quick-tool-icon-box {
  width: 72rpx;
  height: 72rpx;
  border-radius: 18rpx;
  background: linear-gradient(135deg, rgba(25, 30, 40, 0.9) 0%, rgba(20, 25, 35, 0.95) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1rpx solid rgba(179, 247, 60, 0.15);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
  
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(179, 247, 60, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    transition: all 0.4s ease;
    transform: translate(-50%, -50%);
  }
  
  &:hover::before,
  &:active::before {
    width: 150rpx;
    height: 150rpx;
  }
}

/* 快捷工具图标 */
.quick-tool-icon {
  font-size: 36rpx;
  color: #B3F73C;
  text-shadow: 
    0 0 8rpx rgba(179, 247, 60, 0.4),
    0 0 16rpx rgba(179, 247, 60, 0.2);
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
  
  &.active {
    color: #93E02A;
    text-shadow: 
      0 0 12rpx rgba(147, 224, 42, 0.6),
      0 0 24rpx rgba(147, 224, 42, 0.3);
    transform: scale(1.1);
  }
}

/* 快捷工具项悬停效果 */
.quick-tool-item:hover .quick-tool-icon-box,
.quick-tool-item:active .quick-tool-icon-box {
  border-color: rgba(179, 247, 60, 0.3);
  background: linear-gradient(135deg, rgba(35, 42, 55, 0.95) 0%, rgba(25, 32, 45, 1) 100%);
  box-shadow: 
    0 4rpx 16rpx rgba(179, 247, 60, 0.1),
    0 2rpx 8rpx rgba(0, 0, 0, 0.3),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.05);
  transform: translateY(-1rpx);
}

.quick-tool-item:hover .quick-tool-icon,
.quick-tool-item:active .quick-tool-icon {
  transform: scale(1.05);
  color: #93E02A;
}

/* 通话选择弹窗样式 */
.call-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.call-dialog {
  width: 600rpx;
  max-height: 60vh;
  background: linear-gradient(180deg, rgba(25, 30, 40, 0.98) 0%, rgba(20, 25, 35, 1) 100%);
  border-radius: 24rpx;
  border: 1rpx solid rgba(179, 247, 60, 0.2);
  box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20rpx);
  overflow: hidden;
}

.call-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
}

.call-dialog-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #fff;
}

.call-dialog-close {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.call-dialog-close text {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.7);
}

.call-dialog-close:active {
  background: rgba(255, 255, 255, 0.2);
}

.call-dialog-content {
  padding: 24rpx 32rpx;
  display: flex;
  gap: 24rpx;
}

.call-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 16rpx;
  border-radius: 16rpx;
  background: rgba(255, 255, 255, 0.05);
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
  position: relative;
}

.call-option:active {
  border-color: rgba(179, 247, 60, 0.5);
  background: rgba(179, 247, 60, 0.1);
  transform: scale(0.98);
}

.call-option.selected {
  border-color: #B3F73C;
  background: linear-gradient(135deg, rgba(179, 247, 60, 0.15) 0%, rgba(147, 224, 42, 0.2) 100%);
  box-shadow: 0 0 16rpx rgba(179, 247, 60, 0.3);
}

.call-option.selected .call-option-icon {
  background: linear-gradient(135deg, rgba(179, 247, 60, 0.4) 0%, rgba(147, 224, 42, 0.5) 100%);
  box-shadow: 0 4rpx 16rpx rgba(179, 247, 60, 0.2);
}

.call-option.selected .call-option-text {
  color: #B3F73C;
  font-weight: 600;
}

.call-option-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(179, 247, 60, 0.2) 0%, rgba(147, 224, 42, 0.3) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16rpx;
}

.call-option-icon text {
  font-size: 40rpx;
  color: #B3F73C;
}

.call-option-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
}

.call-option-text {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.vip-badge {
  font-size: 20rpx;
  font-weight: bold;
  color: #FFD700;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: 2rpx 8rpx;
  border: 1rpx solid #FFD700;
  border-radius: 8rpx;
  text-align: center;
  min-width: 40rpx;
  line-height: 1.2;
}

.call-option-check {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  background: #B3F73C;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2rpx 8rpx rgba(179, 247, 60, 0.4);
}

.call-option-check text {
  font-size: 20rpx;
  color: #000;
  font-weight: 600;
}

.check-mark {
  font-size: 20rpx;
  color: #000;
  font-weight: bold;
  line-height: 1;
}

.call-agreement {
  border-top: 1rpx solid rgba(255, 255, 255, 0.1);
}

.agreement-summary {
  padding: 20rpx 32rpx 16rpx;
}

.agreement-summary-text {
  font-size: 24rpx;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.agreement-actions {
  padding: 16rpx 32rpx 24rpx;
}

.agreement-checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 12rpx;
  border-radius: 12rpx;
  background: rgba(255, 255, 255, 0.05);
}

.checkbox-icon {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  border-radius: 6rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 16rpx;
  font-size: 20rpx;
  color: #fff;
  transition: all 0.3s ease;
  background: transparent;
}

.checkbox-icon.checked {
  background: #B3F73C;
  border-color: #B3F73C;
  color: #000;
}

.checkmark {
  font-size: 18rpx;
  font-weight: bold;
  color: #000;
  line-height: 1;
}

.checkbox-text {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
  margin-right: 8rpx;
}

.agreement-link {
  font-size: 26rpx;
  color: #B3F73C;
  text-decoration: underline;
  cursor: pointer;
}

.call-confirm-btn {
  width: 100%;
  height: 88rpx;
  border-radius: 16rpx;
  background: linear-gradient(135deg, #B3F73C 0%, #93E02A 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.call-confirm-btn text {
  font-size: 32rpx;
  font-weight: 600;
  color: #000;
}

.call-confirm-btn.disabled {
  background: rgba(255, 255, 255, 0.1);
  opacity: 0.5;
}

.call-confirm-btn.disabled text {
  color: rgba(255, 255, 255, 0.5);
}

.call-confirm-btn:not(.disabled):active {
  transform: scale(0.98);
  box-shadow: 0 8rpx 32rpx rgba(179, 247, 60, 0.3);
}

/* 详细协议弹窗样式 */
.agreement-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.agreement-detail-dialog {
  width: 600rpx;
  max-height: 65vh;
  background: linear-gradient(180deg, rgba(25, 30, 40, 0.98) 0%, rgba(20, 25, 35, 1) 100%);
  border-radius: 20rpx;
  border: 1rpx solid rgba(179, 247, 60, 0.2);
  box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20rpx);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.agreement-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.agreement-detail-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #fff;
}

.agreement-detail-close {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.agreement-detail-close text {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.7);
}

.agreement-detail-close:active {
  background: rgba(255, 255, 255, 0.2);
}

.agreement-detail-content {
  flex: 1;
  padding: 24rpx 32rpx 0;
  overflow-y: auto;
}

.agreement-detail-text {
  font-size: 24rpx;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  padding: 0 0 16rpx 0;
}

.agreement-detail-footer {
  padding: 20rpx 32rpx 24rpx;
  border-top: 1rpx solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.agreement-detail-btn {
  width: 100%;
  height: 80rpx;
  border-radius: 16rpx;
  background: linear-gradient(135deg, #B3F73C 0%, #93E02A 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.agreement-detail-btn text {
  font-size: 30rpx;
  font-weight: 600;
  color: #000;
}

.agreement-detail-btn:active {
  transform: scale(0.98);
  box-shadow: 0 8rpx 32rpx rgba(179, 247, 60, 0.3);
}
</style> 